<template>
  <Jdd-Card :padding="20" :style="'width:290px;height:270px;color:'+fontColor">
    <div style="display:flex;justify-content: space-between;position: relative;">
      <div :style="'flex:1;text-align:center;];color:'+cardData.color">{{cardData.title}}</div>
      <Jdd-Icon
        v-show="!moreIcon"
        type="ios-menu"
        @click="showMoreIcon"
        :color="fontColor"
        size="18"
        style="cursor: pointer;"
      />
      <Jdd-Icon
        v-show="moreIcon"
        type="md-close"
        @click="showMoreIcon"
        :color="fontColor"
        size="18"
      />
      <div :class="moreIcon?'card-icon more-icon':'card-icon'">
        <Jdd-Icon
          type="md-close"
          @click="showMoreIcon"
          :color="fontColor"
          size="18"
          style="cursor: pointer;"
        />
        <Jdd-Icon type="ios-eye-outline" :color="fontColor" size="18" />
        <Jdd-Icon type="icon-journal" :color="fontColor" size="18" />
      </div>
    </div>
    <div style="margin-top:5px;text-align:center;">{{cardData.desc}}</div>
    <div style="text-align:center;margin-top:10px;">
      <Jdd-Circle v-model="cardData.circleData" :size="120"></Jdd-Circle>
    </div>
    <div style="display:flex;">
      <div
        v-for="(item,index) in cardData.textArr"
        :key="index"
        style="display:flex;flex:1;justify-content: space-around;min-width:45px;"
      >
        <Divider v-show="index!==0" type="vertical" style="height:35px;margin:0px;"></Divider>
        <div>
          <p :style="'text-align:center;color:'+cardData.color">{{cardData.valueArr[index]}}</p>
          <p>{{item}}</p>
        </div>
      </div>
    </div>
  </Jdd-Card>
</template>
<script>
export default {
  name: 'Jdd-MonitorCard',
  data () {
    return {
      moreIcon: false
    }
  },
  computed: {
    fontColor () {
      return this.theme === 'white' ? '#515A6E' : '#D8D9DA'
    }
  },

  methods: {
    showMoreIcon () {
      // console.info('this.moreIconHeight',this.moreIconHeight)
      // this.moreIconHeight===-36&&(this.moreIconHeight===0)
      // this.moreIconHeight===0&&(this.moreIconHeight===-36)
      this.moreIcon = !this.moreIcon
    }
  },
  props: {
    theme: {
      type: String,
      default: 'white'
    },
    cardData: {
      type: Object,
      default: () => {
        return {
          title: '',
          desc: '',
          color: '#F05A28',
          textArr: [],
          valueArr: [],
          circleData: {}
        }
      }
    }
  }
}
</script>
<style scoped>
.card-icon {
  transition: top 300ms ease, opacity 300ms ease;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: -54px;
  display: flex;
  flex-direction: column;
  opacity: 0;
}
.more-icon {
  top: 0px;
  opacity: 1;
}
</style>
